<template>
	<view class="h100 column">
		<view class="search">
			<u-search placeholder="请输入关键词搜索" bgColor="#F2F2F2" :showAction="false" shape="square" v-model="keyword"
				height="73rpx" :customStyle="{ borderRadius: '20rpx', overflow: 'hidden' }" @clear="reSetData"
				@search="reSetData"></u-search>
		</view>
		<!-- <view class="pt27 pl32 pb5">
			<text class="choose"></text>
		</view> -->
		<swiper :indicator-dots="false" :current="current" :autoplay="false" class="flex-1 hidden"
			@animationfinish="onSwiperChange">
			<!-- 品牌 -->
			<swiper-item>
				<scroll-view scroll-y class="h100">
					<view class="w-calc-30 fs28 bold mt20 mb29" @click="onSelectBrand(null)">不限品牌</view>
					<u-index-list :index-list="indexBrand">
						<template v-for="(item, index) in itemBrand">
							<!-- #ifdef APP-NVUE -->
							<u-index-anchor :text="indexBrand[index]" bgColor="#f3f7fa" />
							<!-- #endif -->
							<u-index-item>
								<!-- #ifndef APP-NVUE -->
								<u-index-anchor :text="indexBrand[index]" bgColor="#f3f7fa" />
								<!-- #endif -->
								<view :class="['list-cell active_bg', form.brand_id === cell.id && 'cell-act']"
									v-for="(cell, index) in item" @click="onSelectBrand(cell)">
									<u-icon :name="cell.logo" size="50rpx"></u-icon>
									<view class="ml10">{{ cell.name }}</view>
								</view>
							</u-index-item>
						</template>
					</u-index-list>
				</scroll-view>
			</swiper-item>
			<!-- 车系 -->
			<swiper-item>
				<scroll-view scroll-y class="h100">
					<view class="w-calc-30 fs28 bold mt20 mb29" @click="onSelectSearies(null)">不限年限</view>
					<u-index-list :index-list="indexSeries">
						<template v-for="(item, index) in itemSeries">
							<!-- #ifdef APP-NVUE -->
							<u-index-anchor :text="indexSeries[index]" bgColor="transparent"></u-index-anchor>
							<!-- #endif -->
							<u-index-item>
								<!-- #ifndef APP-NVUE -->
								<u-index-anchor :text="indexSeries[index]" bgColor="transparent"></u-index-anchor>
								<!-- #endif -->
								<view :class="['list-cell', form.series_id === cell.id && 'cell-act']" v-for="(cell, index) in item"
									@click="onSelectSearies(cell)">
									<u-icon :name="cell.logo" size="50rpx"></u-icon>
									<view class="ml10">{{ cell.name }}</view>
								</view>
							</u-index-item>
						</template>
					</u-index-list>
				</scroll-view>
			</swiper-item>
			<!-- 车型 -->
			<swiper-item>
				<scroll-view scroll-y class="h100">
					<view class="year">
						<view v-for="item in indexTypes" :key="item" :class="['year-item', curYear === item && 'item-act']"
							@click="onYearChange(item)">
							{{ item }}
						</view>
					</view>
					<view class="w-calc-30 fs28 bold mt20 mb29" @click="onSelectType(null)">不限年限</view>
					<view class="">
						<view :class="['list-cell', form.car_id === cell.id && 'cell-act']" v-for="(cell, index) in itemTypes"
							:key="index" @click="onSelectType(cell)">
							<u-icon :name="cell.logo" size="50rpx"></u-icon>
							<view class="ml10">{{ cell.name }}</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script setup>
	import {
		nextTick,
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		brandList,
		modelList,
		seriesList
	} from '@/api/car';
	import {
		navBack,
		showToast
	} from '@/core/app';
	import index from '@/core/config';
	import storage from '@/utils/storage';
	import {
		useStore
	} from "vuex"

	const keyword = ref('');
	const form = ref({
		brand_id: '',
		brand_name: '',
		series_id: '',
		series_name: '',
		car_id: '',
		car_name: ''
	});
	const brandOpt = ref(null)
	/* 初始化缓存 */
	const store = useStore()

	// 品牌数据
	const indexBrand = ref([]);
	const itemBrand = ref([]);

	function getBrandData() {
		brandList({
			keywords: keyword.value
		}).then((res) => {
			indexBrand.value = Object.keys(res.data);
			itemBrand.value = Object.values(res.data);
		});
	}

	function onSelectBrand(cell) {
		console.log("onSelectBrand", cell, !cell)
		if (!cell) {
			form.value.brand_id = ''
			form.value.brand_name = '不限品牌'
			form.value.series_id = ''
			form.value.series_name = ''
			form.value.car_id = '';
			form.value.car_name = '';
			onSubmit()
			return;
		}
		form.value.brand_id = cell.id;
		form.value.brand_name = cell.name;
		itemSeries.value = []
		indexSeries.value = []
		indexTypes.value = []
		itemTypes.value = []
		getSeriesData();
		current.value = 1;
		// 副作用
		form.value.car_id = null;
		form.value.series_id = null;

	}

	// 车系数据
	const indexSeries = ref([]);
	const itemSeries = ref([]);

	function getSeriesData() {
		seriesList({
			keywords: keyword.value,
			brand_id: form.value.brand_id
		}).then((res) => {
			indexSeries.value = res.data.map((item) => item.name);
			itemSeries.value = res.data.map((item) => item.carSeries);
		});
	}

	function onSelectSearies(cell) {
		if (!cell) {
			form.value.series_id = ''
			form.value.series_name = '不限车系'
			onSubmit()
		}
		indexTypes.value = []
		itemTypes.value = []
		form.value.series_id = cell.id;
		form.value.series_name = cell.name;
		getTypeData();
		current.value = 2;
		// 副作用
		form.value.car_id = null;
	}

	/* 车型 */
	const curYear = ref('');
	const allYears = ref({});
	const indexTypes = ref([]);
	const itemTypes = ref([]);

	function getTypeData() {
		modelList({
			keywords: keyword.value,
			series_id: form.value.series_id
		}).then((res) => {
			allYears.value = res.data;
			indexTypes.value = Object.keys(res.data);
			curYear.value = indexTypes.value[0];
			itemTypes.value = allYears.value[curYear.value];
		});
	}

	function onSelectType(cell) {
		if (cell) {
			form.value.car_id = cell.id;
			form.value.car_name = cell.name;
		} else {
			form.value.car_id = '';
			form.value.car_name = '不限年限';
		}
		onSubmit()
	}

	function onYearChange(key) {
		curYear.value = key;
		itemTypes.value = allYears.value[curYear.value]
	}

	/* 轮播切换数据 */
	const current = ref(0);

	function onSwiperChange(e) {
		nextTick(() => {
			const cur = e.detail.current;
			switch (cur) {
				case 1:
					if (!form.value.brand_id) {
						current.value = 0;
						showToast('请先选择品牌!');
					} else {
						current.value = cur;
					}
					break;
				case 2:
					if (!form.value.series_id) {
						current.value = 1;
						showToast('请先选择车系!');
					} else {
						current.value = cur;
					}
					break;
				default:
					current.value = cur;
			}
			setTitle();
		});
	}

	/* 设置标题 */
	function setTitle() {
		switch (current.value) {
			case 0:
				uni.setNavigationBarTitle({
					title: '选择品牌'
				});
				break;
			case 1:
				uni.setNavigationBarTitle({
					title: '选择车系'
				});
				break;
			case 2:
				uni.setNavigationBarTitle({
					title: '选择年限'
				});
				break;
		}
	}

	/* 重置/初始化数据 */
	function reSetData() {
		switch (current.value) {
			case 0:
				getBrandData();
				break;
			case 1:
				getSeriesData();
				break;
			case 2:
				getTypeData();
				break;
		}
	}

	/* 选择表单 */
	function onSubmit() {
		store.commit('SET_BRAND', form.value)
		if (brandOpt.value) {
			uni.$emit('changeBrand', {
				brand: JSON.stringify(form.value)
			});
		}
		navBack()
	}

	onLoad((option) => {
		option.brand && (brandOpt.value = option.brand)
		getBrandData();
		setTitle();
	});
</script>

<style scoped lang="scss">
	.search {
		width: 750rpx;
		height: 135rpx;
		background: #ffffff;
		padding: 36rpx 30rpx 26rpx;
		box-sizing: border-box;
		background: #ffffff;
	}

	.list-cell {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 24rpx;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
	}

	.cell-act {
		background-color: #88beff !important;
		color: #0759bb;
		font-weight: 800;
	}

	.choose {
		font-weight: bold;
		font-size: 28rpx;
		color: #000000;
	}

	:deep(.u-border-bottom) {
		border-bottom: #ffffff;
	}

	:deep(.u-index-list__letter) {
		display: none;
	}

	.year {
		width: 100%;
		padding: 30rpx;
		box-sizing: border-box;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 20rpx 29rpx;

		.year-item {
			width: 100%;
			height: 67rpx;
			border-radius: 8rpx;
			font-weight: 400;
			font-size: 26rpx;
			color: #000000;
			line-height: 67rpx;
			text-align: center;
			background: #ffffff;
			border: 1rpx solid #ffffff;
			transition: all 0.3s;
		}

		.item-act {
			background: rgba(7, 89, 187, 0.2);
			border-radius: 8rpx;
			border: 1rpx solid #88beff;
			font-weight: bold;
			font-size: 26rpx;
			color: #0759bb;
		}
	}
</style>